<template>
    <div class="form">
        <section class="body">
            <p class="hedd-text">发起人姓名</p>
            <van-field v-model="name" required label="发起人姓名" placeholder="请输入发起人姓名" maxlength="6" />
        </section>
        <section class="body">
            <p class="hedd-text">发起人身份证号</p>
            <van-field
                v-model="number"
                required
                label="身份证号"
                placeholder="请输入发起人身份证号"
                maxlength="18"
            />
        </section>
        <section class="body">
            <p class="hedd-text">发起人手机号</p>
            <van-field
                v-model="phoneNum"
                required
                label="手机号"
                placeholder="请输入发起人手机号"
                maxlength="18"
            ></van-field>
            <div class="btn-box">
                <van-button
                    slot="button"
                    size="small"
                    @click="caotcha()"
                    color="#ff5e10"
                    v-if="showtime===null"
                    type="primary"
                >发送验证码</van-button>
                <van-button
                    v-else
                    slot="button"
                    size="small"
                    color="#ff5e10"
                    disabled
                    type="primary"
                >{{showtime}}</van-button>
            </div>
        </section>
        <section class="body">
            <p class="hedd-text">验证码</p>
            <van-field v-model="code" required label="验证码" placeholder="请输入验证码" maxlength="18" />
        </section>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >保存</van-button>
        </footer>
    </div>
</template>

<script>
import { Field, Button, Toast } from "vant";
import { sendSMS, authenticationInitiator } from "@/api/api";
export default {
    name: "Basic",
    components: {
        [Field.name]: Field,
        [Toast.name]: Toast,
        [Button.name]: Button
    },
    data() {
        return {
            // 计时器,注意需要进行销毁
            timeCounter: null,
            // null 则显示按钮 秒数则显示读秒
            showtime: null,
            name: "",
            number: "",
            phoneNum: "",
            code: ""
        };
    },
    created() {},
    methods: {
        caotcha() {
            if (this.phoneNum == "") {
                Toast("请输入手机号");
                return;
            }
            sendSMS({ phoneNum: this.phoneNum }).then(res => {
                if (res.code) Toast("验证码已发送");
            });
            this.countDown(60);
        },
        countDownText(s) {
            this.showtime = `${s}s后重新获取`;
        },
        submit() {
            let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            let tel = /^1[3456789]\d{9}$/;
            if (this.name == "") {
                Toast("请输入姓名");
                return;
            }
            if (reg.test(this.number) === false) {
                Toast("请输入正确的身份证号");
                return;
            }
            if (tel.test(this.phoneNum) === false) {
                Toast("请输入正确的手机号");
                return;
            }
            if (this.code == "") {
                Toast("请输入验证码");
                return;
            }
            authenticationInitiator({
                name: this.name,
                number: this.number,
                phoneNum: this.phoneNum,
                code: this.code
            }).then(res => {
                if (res.code) {
                    Toast("成功");
                    this.$router.push({
                        path: "/BasicInfo",
                        query: { id: this.$route.query.id }
                    });
                }
            });
        },
        //倒计时 60秒
        countDown(times) {
            const self = this; // 时间间隔 1秒
            const interval = 1000;
            let count = 0;
            self.timeCounter = setTimeout(countDownStart, interval);
            function countDownStart() {
                if (self.timeCounter == null) {
                    return false;
                }
                count++;
                self.countDownText(times - count + 1);
                if (count > times) {
                    clearTimeout(self.timeCounter);
                    self.showtime = null;
                } else {
                    self.timeCounter = setTimeout(countDownStart, interval);
                }
            }
        }
    }
};
</script>

<style scoped>
.promise p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 20px;
    margin-bottom: 20px;
}
.form {
    margin-bottom: 66px;
}
.form .van-cell {
    height: auto;
}
.btn-box{
    padding: 20px 0 0 0;
    text-align: right;
}
</style>